<template>
	<view class="wha main bb">
		<tabs :tabList="tabList" @changeTabs="changeTabs"></tabs>
		<view class="syllable wha" v-if="tabInd == 0">
		    <view class="title">元音</view>
		    <view class="vowel d_f_sarwc">
				<view class="item" :class="item.separate ? 'border_c' : ''" @click="playSound(item.sound)" v-for="item in vowel">
				    <view class="separate man_font">{{item.separate}}</view>
				    <view class="name">{{item.name}}</view>
				    <view class="transfer"> {{item.separate ? '转写：' : ''}} <view class="col_red">{{item.transfer}}</view></view>
				</view>
			</view>
		    <view class="title">辅音</view>
		    <view class="consonant d_f_sarwc">
				<view class="item" :class="item.separate ? 'border_c' : ''" @click="playSound(item.sound)" v-for="item in consonant">
				    <view class="separate man_font">{{item.separate}}</view>
				    <view class="name">{{item.name}}</view>
				    <view class="transfer"> {{item.separate ? '转写：' : ''}} <view class="col_red">{{item.transfer}}</view></view>
				</view>
			</view>
		</view>
		<view class="syllable" v-if="tabInd == 1">
		    <view class="vowel d_f_sarwc">
				<view class="item" :class="item.separate ? 'border_c' : ''" @click="playSound(item.sound)" v-for="item in secIni">
				    <view class="separate man_font">{{item.separate}}</view>
				    <view class="name">{{item.name}}</view>
				    <view class="transfer"> {{item.separate ? '转写：' : ''}} <view class="col_red">{{item.transfer}}</view></view>
				</view>
			</view>
		</view>
		<view class="syllable" v-if="tabInd == 2">
		    <view class="vowel d_f_sarwc">
				<view class="item" :class="item.separate ? 'border_c' : ''" @click="playSound(item.sound)" v-for="item in thrIni">
				    <view class="separate man_font">{{item.separate}}</view>
				    <view class="name">{{item.name}}</view>
				    <view class="transfer"> {{item.separate ? '转写：' : ''}} <view class="col_red">{{item.transfer}}</view></view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import tabs from '@/components/tools/tabs.vue';
	export default {
		components: { tabs },
		name: '音标',
		props: [],
		data() {
			return {
				tabInd: 0,
				tabList: ['第一字头','第二字头','第三字头'],
				vowel: [
					{name: 'a',separate: 'ᠠ',transfer: 'a',sound: 'a'},
					{name: 'ɯ',separate: 'ᡝ',transfer: 'e',sound: 'e'},
					{name: 'i',separate: 'ᡳ',transfer: 'i',sound: 'i'},
					{name: 'ɔ',separate: 'ᠣ',transfer: 'o',sound: 'o'},
					{name: 'u',separate: 'ᡠ',transfer: 'u',sound: 'u'},
					{name: 'ʊ',separate: 'ᡡ',transfer: 'ū、v',sound: 'v'}
				],
				consonant: [
				    {name: 'na',separate: 'ᠨᠠ',transfer: 'na',sound: 'na'},        
				    {name: 'nɯ',separate: 'ᠨᡝ',transfer: 'ne',sound: 'ne'},
				    {name: 'ni',separate: 'ᠨᡳ',transfer: 'ni',sound: 'ni'},
				    {name: 'no',separate: 'ᠨᠣ',transfer: 'no',sound: 'no'},
				    {name: 'nɔ',separate: 'ᠨᡠ',transfer: 'nu',sound: 'nu'},
				    {name: 'nʊ',separate: 'ᠨᡡ',transfer: 'nū',sound: 'nv'},
				
				    {name: 'qa',separate: 'ᡴᠠ',transfer: 'ka',sound: 'ka'},
				    {name: 'ɢa',separate: 'ᡤᠠ',transfer: 'ɡa',sound: 'ga'},
				    {name: 'χa',separate: 'ᡥᠠ',transfer: 'ha',sound: 'ha'},
				    {name: 'qo',separate: 'ᡴᠣ',transfer: 'ko',sound: 'ko'},
				    {name: 'ɢo',separate: 'ᡤᠣ',transfer: 'ɡo',sound: 'go'},
				    {name: 'χo',separate: 'ᡥᠣ',transfer: 'ho',sound: 'ho'},
				    {name: 'qʊ',separate: 'ᡴᡡ',transfer: 'kū',sound: 'kv'},
				    {name: 'ɢʊ',separate: 'ᡤᡡ',transfer: 'ɡū',sound: 'gv'},
				    {name: 'χʊ',separate: 'ᡥᡡ',transfer: 'hū',sound: 'hv'},
				    {name: '',separate: '',transfer: '',sound: ''},
				    {name: '',separate: '',transfer: '',sound: ''},
				    {name: '',separate: '',transfer: '',sound: ''},
				
				    {name: 'ba',separate: 'ᠪᠠ',transfer: 'ba',sound: 'ba'},
				    {name: 'bɯ',separate: 'ᠪᡝ',transfer: 'be',sound: 'be'},
				    {name: 'bi',separate: 'ᠪᡳ',transfer: 'bi',sound: 'bi'},
				    {name: 'bo',separate: 'ᠪᠣ',transfer: 'bo',sound: 'bo'},
				    {name: 'bɔ',separate: 'ᠪᡠ',transfer: 'bu',sound: 'bu'},
				    {name: 'bʊ',separate: 'ᠪᡡ',transfer: 'bū',sound: 'bv'},
				
				    {name: 'pa',separate: 'ᡦᠠ',transfer: 'pa',sound: 'pa'},
				    {name: 'pɯ',separate: 'ᡦᡝ',transfer: 'pe',sound: 'pe'},
				    {name: 'pi',separate: 'ᡦᡳ',transfer: 'pi',sound: 'pi'},
				    {name: 'po',separate: 'ᡦᠣ',transfer: 'po',sound: 'po'},
				    {name: 'pɔ',separate: 'ᡦᡠ',transfer: 'pu',sound: 'pu'},
				    {name: 'pʊ',separate: 'ᡦᡡ',transfer: 'pū',sound: 'pv'},
				
				    {name: 'sa',separate: 'ᠰᠠ',transfer: 'sa',sound: 'sa'},
				    {name: 'sɯ',separate: 'ᠰᡝ',transfer: 'se',sound: 'se'},
				    {name: 'si',separate: 'ᠰᡳ',transfer: 'si',sound: 'si'},
				    {name: 'so',separate: 'ᠰᠣ',transfer: 'so',sound: 'so'},
				    {name: 'sɔ',separate: 'ᠰᡠ',transfer: 'su',sound: 'su'},
				    {name: 'sʊ',separate: 'ᠰᡡ',transfer: 'sū',sound: 'sv'},
				
				    {name: 'ta',separate: 'ᡨᠠ',transfer: 'ta',sound: 'ta'},
				    {name: 'da',separate: 'ᡩᠠ',transfer: 'da',sound: 'da'},
				    {name: 'tɯ',separate: 'ᡨᡝ᠋',transfer: 'te',sound: 'te'},
				    {name: 'dɯ',separate: 'ᡩᡝ',transfer: 'de',sound: 'de'},
				    {name: 'ti',separate: 'ᡨᡳ',transfer: 'ti',sound: 'ti'},
				    {name: 'di',separate: 'ᡩᡳ',transfer: 'di',sound: 'di'},
				    {name: 'tɔ',separate: 'ᡨᠣ',transfer: 'to',sound: 'to'},
				    {name: 'dɔ',separate: 'ᡩᠣ',transfer: 'do',sound: 'do'},
				    {name: 'tɔ',separate: 'ᡨᡠ᠋',transfer: 'tu',sound: 'tu'},
				    {name: 'dɔ',separate: 'ᡩᡠ',transfer: 'du',sound: 'du'},
				    {name: '',separate: '',transfer: '',sound: ''},
				    {name: '',separate: '',transfer: '',sound: ''},
				
				    {name: 'la',separate: 'ᠯᠠ',transfer: 'la',sound: 'la'},
				    {name: 'lɯ',separate: 'ᠯᡝ',transfer: 'le',sound: 'le'},
				    {name: 'li',separate: 'ᠯᡳ',transfer: 'li',sound: 'li'},
				    {name: 'lo',separate: 'ᠯᠣ',transfer: 'lo',sound: 'lo'},
				    {name: 'lɔ',separate: 'ᠯᡠ',transfer: 'lu',sound: 'lu'},
				    {name: 'lʊ',separate: 'ᠯᡡ',transfer: 'lū',sound: 'lv'},
				
				    {name: 'ma',separate: 'ᠮᠠ',transfer: 'm',sound: 'ma'},
				    {name: 'mɯ',separate: 'ᠮᡝ',transfer: 'm',sound: 'me'},
				    {name: 'mi',separate: 'ᠮᡳ',transfer: 'm',sound: 'mi'},
				    {name: 'mo',separate: 'ᠮᠣ',transfer: 'm',sound: 'mo'},
				    {name: 'mɔ',separate: 'ᠮᡠ',transfer: 'm',sound: 'mu'},
				    {name: 'mʊ',separate: 'ᠮᡡ',transfer: 'm',sound: 'mv'},
				
				    {name: '',separate: 'ᠴᠠ',transfer: 'qa',sound: 'qa'},
				    {name: '',separate: 'ᠴᡝ',transfer: 'qe',sound: 'qe'},
				    {name: '',separate: 'ᠴᡳ',transfer: 'qi',sound: 'qi'},
				    {name: '',separate: 'ᠴᠣ',transfer: 'qo',sound: 'qo'},
				    {name: '',separate: 'ᠴᡠ',transfer: 'qu',sound: 'qu'},
				    {name: '',separate: 'ᠴᡡ',transfer: 'qū',sound: 'qv'},
				
				    {name: 'dʐa',separate: 'ᠵᠠ',transfer: 'ja',sound: 'ja'},
				    {name: 'dʐɯ',separate: 'ᠵᡝ',transfer: 'je',sound: 'je'},
				    {name: 'dʐi',separate: 'ᠵᡳ',transfer: 'ji',sound: 'ji'},
				    {name: 'dʐo',separate: 'ᠵᠣ',transfer: 'jo',sound: 'jo'},
				    {name: 'dʐɔ',separate: 'ᠵᡠ',transfer: 'ju',sound: 'ju'},
				    {name: 'dʐʊ',separate: 'ᠵᡡ',transfer: 'jū',sound: 'jv'},
				
				    {name: 'ja',separate: 'ᠶᠠ',transfer: 'ya',sound: 'ya'},
				    {name: 'jɯ',separate: 'ᠶᡝ',transfer: 'ye',sound: 'ye'},
				    {name: '',separate: '',transfer: '',sound: ''},
				    {name: 'jo',separate: 'ᠶᠣ',transfer: 'yo',sound: 'yo'},
				    {name: 'jɔ',separate: 'ᠶᡠ',transfer: 'yu',sound: 'yu'},
				    {name: 'jʊ',separate: 'ᠶᡡ',transfer: 'yū',sound: 'yv'},
				
				    {name: 'kɯ',separate: 'ᡴᡝ',transfer: 'ke',sound: 'ke'},
				    {name: 'ɡɯ',separate: 'ᡤᡝ',transfer: 'ɡe',sound: 'ge'},
				    {name: 'xɯ',separate: 'ᡥᡝ',transfer: 'he',sound: 'he'},
				    {name: 'ki',separate: 'ᡴᡳ',transfer: 'ki',sound: 'ki'},
				    {name: 'ɡi',separate: 'ᡤᡳ',transfer: 'ɡi',sound: 'gi'},
				    {name: 'xi',separate: 'ᡥᡳ',transfer: 'hi',sound: 'hi'},
				    {name: 'kɔ',separate: 'ᡴᡠ',transfer: 'ku',sound: 'ku'},
				    {name: 'ɡɔ',separate: 'ᡤᡠ',transfer: 'ɡu',sound: 'gu'},
				    {name: 'xɔ',separate: 'ᡥᡠ',transfer: 'hu',sound: 'hu'},
				    {name: '',separate: '',transfer: '',sound: ''},
				    {name: '',separate: '',transfer: '',sound: ''},
				    {name: '',separate: '',transfer: '',sound: ''},
				
				    {name: '',separate: 'ᠺᠠ',transfer: "k'a'",sound: 'Ka'},
				    {name: '',separate: 'ᡬᠠ',transfer: "g'a'",sound: 'Ga'},
				    {name: '',separate: 'ᡭᠠ',transfer: "h'a'",sound: 'Ha'},
				    {name: '',separate: 'ᠺᠣ',transfer: "k'o'",sound: 'Ko'},
				    {name: '',separate: 'ᡬᠣ',transfer: "g'o'",sound: 'Go'},
				    {name: '',separate: 'ᡭᠣ',transfer: "h'o'",sound: 'Ho'},
				
				    {name: 'ra',separate: 'ᡵᠠ',transfer: 'ra',sound: 'ra'},
				    {name: 'rɯ',separate: 'ᡵᡝ',transfer: 're',sound: 're'},
				    {name: 'ri',separate: 'ᡵᡳ',transfer: 'ri',sound: 'ri'},
				    {name: 'ro',separate: 'ᡵᠣ',transfer: 'ro',sound: 'ro'},
				    {name: 'rɔ',separate: 'ᡵᡠ',transfer: 'ru',sound: 'ru'},
				    {name: 'rʊ',separate: 'ᡵᡡ',transfer: 'rū',sound: 'rv'},
				
				    {name: 'fa',separate: 'ᡶᠠ',transfer: 'fa',sound: 'fa'},
				    {name: 'fɯ',separate: 'ᡶᡝ',transfer: 'fe',sound: 'fe'},
				    {name: 'fi',separate: 'ᡶᡳ',transfer: 'fi',sound: 'fi'},
				    {name: 'fo',separate: 'ᡶᠣ',transfer: 'fo',sound: 'fo'},
				    {name: 'fɔ',separate: 'ᡶᡠ',transfer: 'fu',sound: 'fu'},
				    {name: 'fʊ',separate: 'ᡶᡡ',transfer: 'fū',sound: 'fv'},
				
				    {name: 'va',separate: 'ᠸᠠ',transfer: 'wa',sound: 'wa'},    // 部分f和b字中、字尾
				    {name: 'vɯ',separate: 'ᠸᡝ',transfer: 'we',sound: 'we'},    // 部分f和b字中、字尾
				
				    {name: '',separate: '',transfer: '',sound: ''},
				    {name: '',separate: '',transfer: '',sound: ''},
				    {name: '',separate: '',transfer: '',sound: ''},
				    {name: '',separate: '',transfer: '',sound: ''},
				
				    {name: 'tʂa',separate: 'ᡮᠠ',transfer: 'ca',sound: 'ca'},
				    {name: 'tʂɯ',separate: 'ᡮᡝ',transfer: 'ce',sound: 'ce'},
				    {name: 'tʂi',separate: 'ᡮᡟ',transfer: 'ci',sound: 'ci'},
				    {name: 'tʂo',separate: 'ᡮᠣ',transfer: 'co',sound: 'co'},
				    {name: 'tʂɔ',separate: 'ᡮᡠ',transfer: 'cu',sound: 'cu'},
				    {name: '',separate: '',transfer: '',sound: ''},
				    
				    {name: 'za',separate: 'ᡯᠠ',transfer: 'za',sound: 'za'},
				    {name: 'zɯ',separate: 'ᡯᡝ',transfer: 'ze',sound: 'ze'},
				    {name: 'zi',separate: 'ᡯᡳ',transfer: 'zi',sound: 'zi'},       // △
				    {name: 'zo',separate: 'ᡯᠣ',transfer: 'zo',sound: 'zo'},
				    {name: 'zɔ',separate: 'ᡯᡠ',transfer: 'zu',sound: 'zu'},
				    {name: '',separate: '',transfer: '',sound: ''},
				
				    {name: 'r"a',separate: 'ᡰᠠ',transfer: 'r"a',sound: 'rra'},
				    {name: 'r"e',separate: 'ᡰᡝ',transfer: 'r"e',sound: 'rre'},
				    {name: 'r"i',separate: 'ᡰᡳ',transfer: 'r"i',sound: 'rri'},
				    {name: 'r"o',separate: 'ᡰᠣ',transfer: 'r"o',sound: 'rro'},
				    {name: 'r"u',separate: 'ᡰᡠ',transfer: 'r"u',sound: 'rru'},
				    {name: '',separate: '',transfer: '',sound: ''},
				
				    {name: '',separate: 'ᠰᡟ',transfer: 'sy',sound: 'sy'},          // △
				    {name: '',separate: 'ᡱᡳ',transfer: 'qy',sound: 'qy'},         // △
				    {name: '',separate: 'ᡷᡳ',transfer: 'jy',sound: 'jy'}          // △
				],
				secIni: [
				    {name: 'ai',separate: 'ᠠᡳ',transfer: '',sound: ''},
				],
				thrIni: [
				    {name: 'ai',separate: 'ᠠᡳ',transfer: '',sound: ''},
				]
			}
		},
		mounted() {
			
		},
		methods: {
			changeTabs(ind){
				this.tabInd = ind;
			},
			playSound(val) {
				console.log(val);
			},
		},
	}
</script>
<style>
/* 音节 */
.syllable{
	margin: 0 auto;
}
.title{
	width: 100%;
	text-align: center;
	line-height: 60rpx;
	font-weight: bold;
	font-size: 30rpx;
}
.vowel,.consonant{
	width: 100%;
	margin: 0 auto;
	/* display: flex; */
	/* flex-wrap: wrap; */
}
.item{
	/* width: 120rpx; */
	width: 240rpx;
	text-align: center;
	box-sizing: border-box;
	border-radius: 8rpx;
	margin: 4rpx 2rpx;
	cursor: pointer;
}
.item:hover{
	box-shadow: inset 0 0 12rpx 0 #0077ff;
	border: 2rpx solid #2f90ff;
}
.border_c{
	border: 2rpx solid #ccc;
}
.separate{
	width: 100%;
	line-height: 60rpx;
	font-size: 56rpx;
}
.name{
	line-height: 40rpx;
	font-size: 32rpx;
	color: blue;
}
.transfer{
	line-height: 40rpx;
	font-size: 22rpx;
	display: flex;
	justify-content: center;
}
.col_red{
	color: #ff0200;
}
</style>